將使用這的要求轉化成實際的專案需求是實作專案以及節省時間的重要技巧。
var pts = 250;
var => 宣告變數
pts => 變數名稱
250 => 變數的值
var msg ="High score: <strong>"+pts+"</strong>";
設定文字跟HTML的值要用雙引號""包起來
串接or結合數字、文字、變數要用+串起來
參照變數(pts)時,直接使用變數名稱,不用加雙引號
var disconut_msg ="<p> Your Discount is" + discount + "%</P>";
使用<p>
來顯示訊息
$("guess_box").append(discount_msg);
//在guess_box之後插入discount_msg內的文字
把特定內容插入呼叫它的任何元素的後面
當我們為元素添加事件時,我們稱之為把事件繫結(bind)到元素。
有兩種方式把元素繫結起來。
使用此方法,在頁面被載入時將事件添加到元素,這常被稱作便捷方法(convenience method)。
$("#myElement").click(function(){
alert($(this).text());
});
就像用方法1一般使用這個方法,但是我們也能夠使用它針對載入頁面後才被增加到頁面上的元素添加事件,就像建立新的DOM元素那樣。
$("myElement").bind('click',function(){
alert($(this).text());
});
方法1的便捷方法只是方法2的捷徑,但是只能夠用在DOM元素已經存在時。
綁定事件更推薦用 .on
來處理喔,可以少打一些字。 XD
另外,在 HTML 只有一個 .btn
元素,而新元素 .btn2
是在後來才 append
的情況下,像這樣
<button class="btn">Button</button>
<script>
$('.btn2').on('click', function(){
console.log('btn2');
});
$('.btn').on('click', function(){
console.log('btn');
$('body').append('<button class="btn2">Button2</button>');
});
</script>
要注意的是,.btn2
是在點擊了 .btn
之後才產生,這時先前綁在 .btn2
的事件反而不會被觸發。
原來還有這樣的方法...!!
那假如我希望.btn2能夠觸發
$('.btn2').on('click', function(){
console.log('btn2');
});
我可以像這樣子寫嗎?
<button class="btn">Button</button>
<script>
$('.btn').on('click', function(){
console.log('btn');
$('body').append('<button class="btn2">Button2</button>');
});
$('.btn2').on('click', function(){
console.log('btn2');
});
</script>
這樣不行,因為執行到
$('.btn2').on('click', function(){ ... });
的時候, .btn2
的按鈕還沒長出來,自然也綁不到 click
事件。
但是如果換成把事件綁在上一層,假設是 body
上的話,就可以:
$('body').on('click', '.btn2', function(){
console.log('btn2');
});
當 body
接收到事件的時候,再去判斷 click
的對象是不是 .btn2
。 如果是,才去執行對應的 callback function。
像這樣的做法,叫做「事件指派」(Event Delegation)。
感覺有點複雜,我需要點時間吸收QQ
不能執行的原因我可以想像成是
$('.btn').on('click', function(){
跟
$('.btn2').on('click', function(){
是同一層的關係所以執行上其實是會一起執行,所以才會抓不到在.btn
裡面的東西?
之所以 $('.btn2').on('click', function(){ ... });
綁不到事件的原因在於 $('.btn2')
在綁事件的時候, <button class="btn2">Button2</button>
根本還沒生成。
也就是說,當程式執行到
$('.btn2').on('click', function(){ ... });
這行的時候,其實 $('.btn2')
是空的 XD
我、我懂了!謝謝 Kuro大大的細心講解